<template>
	<view class="filter-popup">


		<!-- 新增红色框内筛选内容 -->
		<view class="filter-content">
			<!-- 搜索框 -->
			<view class="search-container">
				<view class="search-box">
					<uni-icons type="search" size="28" color="#999999"></uni-icons>
					<input class="search-input" type="text" placeholder="搜索你找的兼职" v-model="searchValue" />
				</view>
				<text class="search-text" @click="handleSearch">搜索</text>
			</view>


			<!-- 热门搜索 -->
			<view class="related-section">
				<text class="related-label">热门搜索</text>
				<view class="tags-wrap">
					<label class="related-tag" :class="{ active: selectedRelated.includes(tab.id) }"
						v-for="tab in tabsList" :key="tab.id" @click="toggleRelated(tab.id)">
						{{ tab.name }}
					</label>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from "vue";
	import cityHead from "@/components/city-head/index.vue";

	// 定义接收的 props
	const props = defineProps({
		tabsList: {
			type: Array,
			default: () => []
		},
		currentIndex: {
			type: Number,
			required: true
		}
	});

	// 定义要触发的事件
	const emit = defineEmits(['tabChange', 'close', 'confirm', 'reset']);

	// 搜索框绑定值
	const searchValue = ref('');
	// 距离滑块值
	const distance = ref(0);
	// 结算方式
	const selectedSettle = ref('');

	const selectedRelated = ref([]);

	// 处理 tabs 切换
	const handleTabChange = (index, id) => {
		emit('tabChange', index, id);
	};

	// 处理距离滑块改变
	const handleDistanceChange = (e) => {
		distance.value = e.detail.value;
	};

	// 切换标签
	const toggleRelated = (id) => {
		if (selectedRelated.value.includes(id)) {
			selectedRelated.value = selectedRelated.value.filter(item => item !== id);
		} else {
			selectedRelated.value.push(id);
		}
	};

	// 处理关闭弹窗
	const handleClose = () => {
		emit('close');
	};


	const goService = () => {
		uni.navigateTo({
			url: '/pages/contract/addService'
		})
	}
	// 修改handleSearch方法
	const handleSearch = () => {
	  // 对搜索内容进行encodeURIComponent编码
	  const encodedJobName = encodeURIComponent(searchValue.value);
	  emit('confirm', {
	    relatedTags: selectedRelated.value,
	    jobName: encodedJobName // 使用编码后的值
	  });
	  selectedRelated.value = [];
	  searchValue.value = '';
	  handleClose();
	};

	
</script>

<style lang="scss" scoped>
	.filter-popup {
		background-color: #fff;
		padding: 20rpx 0rpx;
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
	}

	.filter-content {
		padding: 20rpx;
	}

	.search-container {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #f1f1f1;
		border-radius: 36rpx;
		padding: 10rpx 20rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.search-text {
		font-weight: 400;
		font-size: 28rpx;
		color: #2F80ED;
		padding: 10rpx 20rpx;
		white-space: nowrap;
	}

	.related-section {
		margin-bottom: 20rpx;

		.related-label {
			font-size: 30rpx;
			margin-bottom: 20rpx;
			display: block;
			color: #333;
			font-weight: 400;
		}

		.tags-wrap {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;

			.related-tag {
				padding: 10rpx 20rpx;
				background-color: #f1f1f1;
				border-radius: 6rpx;
				font-size: 24rpx;
				cursor: pointer;
				color: #333;
				font-weight: 400;

				&.active {
					background-color: #2F80ED;
					color: #fff;
				}
			}
		}
	}
</style>